<template>
  <a-modal title="审核" v-model:visible="visible" :width="600" @ok="handleOk" @cancel="handleCancel" :footer="null"
    :destroyOnClose="true">
    <a-form ref="formRef" :model="formData" :rules="rules" class="process-form">
      <!-- 流程类型 -->
      <a-form-item label="流程类型" name="processType" :label-col="{ span: 4 }" :wrapper-col="{ span: 7 }"
        style="padding-left:16px;">
        <a-select v-model:value="formData.processType" placeholder="请选择流程类型">
          <a-select-option value="PURCHASE_ORDER">采购订单</a-select-option>
          <a-select-option value="PURCHASE_RECEIVE">采购收货</a-select-option>
          <a-select-option value="PURCHASE_RETURN">采购退货</a-select-option>
          <a-select-option value="RETAIL_OUT">零售出库</a-select-option>
          <a-select-option value="RETAIL_RETURN">零售退货</a-select-option>
          <a-select-option value="SALE_ORDER">销售订单</a-select-option>
          <a-select-option value="SALE_OUT">销售出库</a-select-option>
          <a-select-option value="SALE_RETURN">销售退货</a-select-option>
          <a-select-option value="STOCK_ADJUST">库存调整</a-select-option>
          <a-select-option value="STOCK_TAKE">盘点单管理</a-select-option>
          <a-select-option value="STOCK_TRANSFER">仓库调拨</a-select-option>
          <a-select-option value="SUPPLIER_COST">供应商费用</a-select-option>
          <a-select-option value="SUPPLIER_PAYMENT">供应商预付款</a-select-option>
          <a-select-option value="SUPPLIER_RETURN">供应商对账</a-select-option>
          <a-select-option value="STOCK_TRANSFER">供应商结算</a-select-option>
          <a-select-option value="CUSTOMER_COST">客户费用</a-select-option>
          <a-select-option value="CUSTOMER_PAYMENT">客户预付款</a-select-option>
          <a-select-option value="CUSTOMER_RETURN">客户对账</a-select-option>
          <a-select-option value="CUSTOMER_SETTLEMENT">客户结算</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 底部按钮 -->
      <div class="footer-buttons">
        <a-space>
          <a-button @click="handleViewDetail">查看详细内容</a-button>
          <div class="audit-button-wrapper">
            <a-button type="primary" @click="handleAudit">进行审核</a-button>
            <div class="hover-buttons">
              <a-button type="primary" size="small" @click="handleApprove">审核通过</a-button>
              <a-button type="primary" danger size="small" @click="handleReject">审核拒绝</a-button>
            </div>
          </div>
        </a-space>
      </div>
    </a-form>
  </a-modal>

  <!-- 审核拒绝原因弹窗 -->
  <a-modal title="审核拒绝" v-model:visible="rejectVisible" @ok="handleRejectConfirm" @cancel="rejectVisible = false"
    :confirmLoading="rejectLoading">
    <a-form :model="rejectForm">
      <a-form-item label="拒绝原因" name="reason" :rules="[{ required: true, message: '请输入拒绝原因' }]">
        <a-textarea v-model:value="rejectForm.reason" :rows="4" placeholder="请输入拒绝原因" :maxLength="200" show-count />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { debounce } from 'lodash-es';

export default defineComponent({
  components: {
    PlusOutlined,
  },
  emits: ['success'],
  setup() {
    const visible = ref(false);
    const formData = ref<any>({});
    const formRef = ref({});
    const isEdit = ref(false);
    const nodes = ref<any[]>([
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
    ]);

    // 表单验证规则
    const rules = {
      processType: [{ required: false, message: '请选择流程类型' }],
      processNode: [{ required: true, message: '请选择流程节点' }],
      auditor: [{ required: true, message: '请选择审核人', trigger: 'change' }],
      auditDept: [{ required: true, message: '请选择审核部门', trigger: 'change' }],
    };

    // 加载部门树
    const loadDeptTree = async () => {
      try {

      } catch (error) {
        console.error('加载部门树失败:', error);
      }
    };

    // 打开新增
    const openAdd = () => {
      console.log('openAdd');
      isEdit.value = false;
      formData.value = {
        processType: undefined,
        processNode: undefined,
        auditor: undefined,
        auditDept: undefined,
      };
      loadDeptTree();
      visible.value = true;
    };

    // 确认
    const handleOk = async () => {
      try {
        await formRef.value.validate();
        // 调用保存API
        // await processApi.save(formData.value);
        message.success('保存成功');
        visible.value = false;
        emit('success');
      } catch (error) {
        console.error('保存失败:', error);
      }
    };

    // 取消
    const handleCancel = () => {
      visible.value = false;
      formData.value = {};
    };

    // 节点类型变化处理
    const handleNodeTypeChange = (index: number, value: string) => {
      const node = nodes.value[index];
      node.approvers = [];
      node.department = undefined;
    };

    // 审核拒绝相关
    const rejectVisible = ref(false);
    const rejectLoading = ref(false);
    const rejectForm = ref({
      reason: '',
    });

    // 通过审核
    const handleApprove = async () => {
      try {
        rejectLoading.value = true;
        // 调用审核通过API
        // await auditApi.approve({
        //   id: formData.value.id,
        //   status: 'APPROVED'
        // });
        message.success('审核通过');
        visible.value = false;
        emit('success');
      } catch (error) {
        console.error('审核失败:', error);
        message.error('审核失败');
      } finally {
        rejectLoading.value = false;
      }
    };

    // 打开拒绝弹窗
    const handleReject = () => {
      rejectForm.value.reason = '';
      rejectVisible.value = true;
    };

    // 确认拒绝
    const handleRejectConfirm = async () => {
      if (!rejectForm.value.reason.trim()) {
        message.warning('请输入拒绝原因');
        return;
      }

      try {
        rejectLoading.value = true;
        // 调用审核拒绝API
        // await auditApi.reject({
        //   id: formData.value.id,
        //   status: 'REJECTED',
        //   reason: rejectForm.value.reason,
        // });
        message.success('已拒绝审核');
        rejectVisible.value = false;
        visible.value = false;
        emit('success');
      } catch (error) {
        console.error('拒绝失败:', error);
        message.error('拒绝失败');
      } finally {
        rejectLoading.value = false;
      }
    };

    return {
      visible,
      formData,
      formRef,
      rules,
      openAdd,
      handleOk,
      handleCancel,
      isEdit,
      nodes,
      handleNodeTypeChange,
      handleApprove,
      handleReject,
      rejectVisible,
      rejectLoading,
      rejectForm,
      handleRejectConfirm,
    };
  },
});
</script>

<style lang="less" scoped>
.process-form {
  padding: 24px 16px;

  :deep(.ant-form-item) {
    margin-bottom: 0 !important;
  }

  .node-list {
    padding-top: 9px;

    .node-item {
      // margin-bottom: 24px;
      padding: 9px;
      // background: #f8f8f8;
      border-radius: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      .node-content {
        display: flex;
        align-items: flex-start;
        gap: 24px;

        .node-type {
          flex: 1;
          margin-bottom: 0;

          :deep(.ant-form-item-label) {
            width: 100px;
          }
        }

        .node-right {
          flex: 1;

          :deep(.ant-form-item) {
            margin-bottom: 0;

            .ant-form-item-label {
              width: 80px;
            }
          }

          .node-text {
            line-height: 32px;
            color: #666;
          }
        }
      }
    }
  }

  :deep(.ant-form-item) {
    margin-bottom: 24px;
  }

  .footer-buttons {
    text-align: center;
    margin-top: 24px;

    .audit-button-wrapper {
      position: relative;
      display: inline-block;

      .hover-buttons {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 90%;
        background: #fff;
        padding: 4px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 1000;
  flex-direction: row;
  justify-content: center;
  align-items: center;
        .ant-btn {
         
          margin: 0 4px;
        }
      }

      &:hover {
        .hover-buttons {
          display: flex;
        }
      }
    }
  }
}
</style>
